<template>
    <div class="app-container" style="background:#F4F4F4;padding:0;" v-loading="loading">
        <!--top--->
        <div class="my-view-top">
            <!--top-left--->
            <div  class="float-left">
                <div class="model-small bg-white">
                    <div class="tit">我的表单数量</div>
                    <div class="tit-tip">
                        <span  class="tit-tip-tit">表单数量：</span> <span class="tit-tip-num">{{statistics.tableSize}}</span>
                    </div>
                    <div class="chart-img">
                        <img src="~@/assets/images/DMS/system/bar-img.png" alt="">
                    </div>
                </div>
                <div class="model-small bg-white mt10">
                    <div class="tit">内容更新记录数</div>
                    <div class="tit-tip">
                        <span  class="tit-tip-tit">累计：</span> <span class="tit-tip-num">{{statistics.totalUpdateRecord}}</span>
                        <span  class="tit-tip-tit">昨日新增：</span> <span class="tit-tip-num">{{statistics.updateRecord}}</span>
                    </div>
                    <div class="chart-img">
                        <img src="~@/assets/images/DMS/system/img.png" alt="">
                    </div>
                </div>
            </div>
                <!--top-right--->
            <div class="data-change-echart bg-white">
                <div class="tit">数据变化</div>
                <div id="myChart" style="height:325px"></div>
            </div>
        </div>
        <!--bottom--->
        <div class="my-view-bottom mt10 mb10">
            <el-row :gutter='10'>
                <el-col :span="12" :lg="12">
                    <div class="my-view-table">
                        <smallTable :title="HistoryList.title" @jumpHandle='jumpHandle' :maxHeight="maxHeight" :maxtableHeight="maxtableHeight" :header="HistoryList.header" :listData="HistoryList.list"/>
                    </div>
                </el-col>
                <el-col :span="12" :lg="12">
                    <div class="my-view-table">
                        <smallTable :title="tableDataList.title"  @jumpHandle='jumpHandle' :maxHeight="maxHeight" :maxtableHeight="maxtableHeight" :header="tableDataList.header" :listData="tableDataList.list"/>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import smallTable from './model/small_table'
import {statistics,queryTableHistory,concernTableUpate} from '@/api/dataManagement/system/view'
import {getWeek} from '@/api/dataManagement/system/log'
export default {
    name: "my-view",
    data(){
        return {
            loading:false,
            maxtableHeight:'321px',
            maxHeight:423,
            statistics:'',
            tableDataList:{
                title:'关注表单更新',
                header:[
                    {label:'表单名称', props:'tableAlias',isjump:true},
                    {label:'表单名称（数据库）',props:'tableName'},
                    {label:'更新类型',props:'logTypeName'},
                    {label:'最近更新时间',props:'createTime'}
                    ],
                list:[]
            },
            HistoryList:{
                title:'最近打开表单',
                header:[
                    {label:'表单名称', props:'tableAlias',isjump:true},
                    {label:'表单名称（数据库）',props:'tableName'},
                    {label:'最近打开时间',props:'queryTime'},
                    {label:'最近更新时间',props:'updateTime'}
                ],
                list:[]
            },
            chartList:''
        }
    },
    components:{smallTable},
    created(){
    },
    mounted(){
        this.getStatistics();
        this.getqueryTableHistory();
        this.getconcernTableUpate()
        this.getWeekList()
    },
    methods: {
        // 获取统计数量
        getStatistics(){
            statistics().then(res=>{
                this.statistics= res.data
            })
        },
        //最近打开表单
        getqueryTableHistory(){
            queryTableHistory().then(res=>{
                this.HistoryList.list = res.data
            })
        },
        // 关注表单更新
        getconcernTableUpate(){
            concernTableUpate().then(res=>{
                this.tableDataList.list = res.data
            })
        },
        setDatas(list){
            var size0 = [],size1 = [],size2 = [],size3 = [],dataTime=[];
            function setCharDatas(data){
               for(var i=0;i<data.length;i++){
                  if(Array.isArray(data[i].list)) {
                     dataTime.push(data[i].date||"")
                     setCharDatas(data[i].list)
                  } else {
                     if(data[i].logType == 0) {
                        size0.push(data[i].size)
                     } else if(data[i].logType == 1){
                        size1.push(data[i].size)
                     } else if(data[i].logType == 2){
                        size2.push(data[i].size)
                     } else {
                        size3.push(data[i].size)
                     }
                  }
               }
               return {size0,size1,size2,size3,dataTime};
            }
            this.chartList = setCharDatas(list);
        },
        // 获取柱状图数据
        getWeekList(){
            getWeek().then(res=>{
                this.setDatas(res.data);
                this.createEchart()
            })
        },
        jumpHandle(row){
            this.$router.push("/DMS/myData/mydata/details/"+row.tableId+'?changeTpe=myView');
        },
        createEchart(){
            var myChart = echarts.init(document.getElementById("myChart"))
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['元数据变更', '关联变更', '数据变更', '表单变更'],
                    bottom:'21px'
                },
                grid: {
                    left: '0%',
                    right: '26px',
                    bottom:'18%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.chartList.dataTime || []
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '元数据变更',
                        type: 'bar',
                        stack: '广告',
                        itemStyle: {
                            color: '#409EFF'
                        },
                        data: this.chartList.size0 || []
                    },
                    {
                        name: '关联变更',
                        type: 'bar',
                        stack: '广告',
                        itemStyle: {
                            color: '#67C23A'
                        },
                        data: this.chartList.size1 || []
                    },
                    {
                        name: '数据变更',
                        type: 'bar',
                        stack: '广告',
                        itemStyle: {
                            color: '#E6A23C'
                        },
                        data: this.chartList.size2 || []
                    },
                    {
                        name: '表单变更',
                        type: 'bar',
                        stack: '广告',
                        itemStyle: {
                            color: '#F56C6C'
                        },
                        data: this.chartList.size3 || []
                    },
                ]
            };
            option && myChart.setOption(option);
            window.onresize = myChart.resize
        }
    },

}
</script>
<style type="scss" lang="scss" scoped>
.left{
    float:left
}
.right{
    float:right
}
.tit{
    border-bottom:1px solid #E6E6E6;
    padding:19px 0 14px 0;
}
.tit-tip{
    padding-top:16px;
    display: flex;
    align-items: center;
    .tit-tip-tit{
        font-size: 18px;;
    }
    .tit-tip-num{
        font-size:30px;
        font-weight:bold;
        padding-right:35px;
    }
}
.model-small{
    width:514px;
    height:185px;
    padding: 0 20px;
    .chart-img{
        padding-top:15px;
    }
}
.data-change-echart{
    margin-left:524px;
    padding:0px 20px;
}
.my-view-bottom{
}
</style>